import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/gauge/lit-gauge.ts"
import {GaugeProps} from "../../../echarts/gauge/lit-gauge.ts";

const meta: Meta<GaugeProps> = {
    title: 'Echarts/LitGauge',
    tags: ['autodocs'],
    render: (args: GaugeProps): TemplateResult => {
        return html`<lit-gauge 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .showProgress=${args.showProgress}
            .seriesName=${args.seriesName}
            .name=${args.name}
            .value=${args.value}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        showProgress: { control: 'boolean' },
        seriesName: { control: 'text' },
        name: { control: 'text' },
        value: { control: 'number' },
    },
};

export default meta;
type Story = StoryObj<GaugeProps>;

export const BasicGauge: Story = {
    args: {
        chartId: 'basic-gauge-chart',
        width: '800px',
        height: '600px',
        seriesName: 'Speed',
        name: 'km/h',
        value: 50,
    }
}

export const SimpleGauge: Story = {
    args: {
        chartId: 'progress-gauge-chart',
        width: '800px',
        height: '600px',
        seriesName: 'Speed',
        name: 'km/h',
        value: 75,
        showProgress: true,
    }
}